<template>
  <div class="ele-body ele-body-card">
	 
    <!-- 顶部卡片 -->
    <el-card shadow="never" body-style="padding: 20px;" >
      <div class="ele-cell workplace-user-card">
        <div class="ele-cell-content ele-cell">
					
          <el-avatar :size="68" :src="url+loginUser.avatar"/>
          <div class="ele-cell-content">
            <h4 class="ele-elip">早安，{{ loginUser.nickname }}，开始您一天的工作吧！</h4>
          <!--  <div class="ele-text-secondary ele-elip" style="margin-top: 8px;">
              <i class="el-icon-heavy-rain"></i>
              <span><s/><s/>今日阴转小雨，22℃ - 32℃，出门记得带伞哦。</span>
            </div> -->
          </div>
        </div>
        <div class="workplace-count-group">
    
        </div>
      </div>
    </el-card>
    <!-- 快捷方式 -->
    <el-row :gutter="15">
		<el-col :lg="3" :md="6" :sm="6" :xs="12">
		  <el-card shadow="hover" body-style="padding: 0;" class="card1" style="background-color:#4fd8db;">
		    <router-link to="/librarymgt/booknum" class="app-link-block">
		      <img src="@/assets/7.png">
		      <div class="app-link-title" style="color: #fff;">分类监测</div>
		    </router-link>
		  </el-card>
		</el-col>
      <el-col :lg="3" :md="6" :sm="6" :xs="12">
        <el-card shadow="hover" body-style="padding: 0;" class="card1" style="background-color:#56bdf5;">
          <router-link to="/librarymgt/bookfind" class="app-link-block">
            <img src="@/assets/8.png">
            <div class="app-link-title" style="color: #fff;">自定义监测</div>
          </router-link>
        </el-card>
      </el-col>
      
      <el-col :lg="3" :md="6" :sm="6" :xs="12">
        <el-card shadow="hover" body-style="padding: 0;" class="card1" style="background-color:#f177ef;">
          <router-link to="/librarymgt/labelprint" class="app-link-block">
           <img src="@/assets/6.png">
            <div class="app-link-title" style="color: #fff;" >预警推送方案</div>
          </router-link>
        </el-card>
      </el-col>
      <el-col :lg="3" :md="6" :sm="6" :xs="12">
        <el-card shadow="hover" body-style="padding: 0;" class="card1" style="background-color:#ebce5e;">
          <router-link to="/readermgt/readercard" class="app-link-block">
            <img src="@/assets/4.png">
            <div class="app-link-title" style="color: #fff;">事件检索平台</div>
          </router-link>
        </el-card>
      </el-col>
      <el-col :lg="3" :md="6" :sm="6" :xs="12">
        <el-card shadow="hover" body-style="padding: 0;" class="card1" style="background-color:#f77777;">
          <router-link to="/librarymgt/batchmgt" class="app-link-block" >
            <img src="@/assets/5.png">
            <div class="app-link-title" style="color: #fff;">专题事件分析</div>
          </router-link>
        </el-card>
      </el-col>
	  <el-col :lg="3" :md="6" :sm="6" :xs="12">
	    <el-card shadow="hover" body-style="padding: 0;" class="card1" style="background-color:#f9a457;">
	      <router-link to="/bookmgt/collectionsite" class="app-link-block" >
	        <img src="@/assets/1.png">
	        <div class="app-link-title" style="color: #fff;">舆情报告</div>
	      </router-link>
	    </el-card>
	  </el-col>
      <el-col :lg="3" :md="6" :sm="6" :xs="12">
        <el-card shadow="hover" body-style="padding: 0;" class="card1" style="background-color: #5ada91;">
          <router-link to="/circulatemgt/barmgt" class="app-link-block">
          <img src="@/assets/2.png">
            <div class="app-link-title" style="color: #fff;">搜索舆情分析</div>
          </router-link>
        </el-card>
      </el-col>
   <!--   <el-col :lg="3" :md="6" :sm="6" :xs="12">
        <el-card shadow="hover" body-style="padding: 0;" class="card1" style="background-color:#65a0eb;">
          <router-link to="/circulatemgt/ctwrong" class="app-link-block">
           <img src="@/assets/3.png">
            <div class="app-link-title" style="color: #fff;">借还异常管理</div>
          </router-link>
        </el-card>
      </el-col> -->
      
    </el-row>
    <!-- 最新动态、我的任务、本月目标 -->
    <el-row :gutter="15">
      <el-col :lg="15" :md="12">
        <el-card
          shadow="never"
          header="基础数据"
          body-style="padding: 0;">
			<div class="jichu">
				<div class="jichu-item" v-for="item in msg.base" :key="item.name">
					<div class="item-title">
						{{item.name}}
					</div>
					<div class='item-msg'>
					 <span class="msg-zuo">	{{item.value}}</span>
					<span class="msg-you"> {{item.unit}}</span>	
						
					</div>
				</div>
			</div>
        </el-card>
      </el-col>
      
      <el-col :lg="9" :md="12" class="hidden-md-and-down">
        <el-card shadow="never" header="">
			<div slot="header" style="display: flex;align-items: center;justify-content: space-between;">
				<div>
					预警信息
				</div>
				<router-link to="/circulatemgt/urmgt" class="app-link-block">
				 <div style="font-size: 12px;color: #aaa;">
				 	查看更多 
				 </div>
				</router-link>
				
			</div>
         
			<div style="" v-if="msg">
					<el-table :data="msg.yuqi_list" stripe style="width: 100%"
						:header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}"  height="218">
						<el-table-column  prop="type" label="预警类型"
							min-width="80"></el-table-column>
						<el-table-column  prop="time" label="预警时间"
							min-width="80"></el-table-column>
						<el-table-column   prop="num" label="预警信息条数"
								min-width="80"></el-table-column>
						<el-table-column  prop="text"  label="预警舆情简报" min-width="80"  ></el-table-column>
					</el-table>
				</div>
          
        </el-card>
      </el-col>
      <el-col :lg="15" :md="24">
		<div style="width: 100%;padding: 0px;background-color: #fff;border-radius: 5px;display: flex;align-items: center;justify-content: space-between;">
			<el-card shadow="never" header="" style="width: 33%;">
				<div slot="header" style="display: flex;align-items: center;justify-content: space-between;">
					<div>
						舆情区域分布占比
					</div>
					
					 <!-- <div style="font-size: 12px;color: #aaa;">
					 	<div class="" >
							 <el-radio-group v-model="radio1" style="display: flex;" size="mini" @change="changenian">
							      <el-radio-button label="year">年</el-radio-button>
							      <el-radio-button label="month">月</el-radio-button>
							</el-radio-group>
						</div>
						
					 </div> -->
				
					
				</div>
				
				<tubiaoa :jieyuemsg="jieyuemsg" v-if="jieyuemsg">
					
				</tubiaoa>
				
			  
			</el-card>
			<el-card shadow="never" header="" style="width: 35%;">
				<div slot="header" style="display: flex;align-items: center;justify-content: space-between;">
					<div>
						舆情分类占比
					</div>
				</div>
				
				<tubiaob :guancangmsg="guancangmsg" v-if="guancangmsg">
					
				</tubiaob>
				
			  
			</el-card>
			<el-card shadow="never" header="" style="width: 23%;">
				<div slot="header" style="display: flex;align-items: center;justify-content: space-between;">
					<div>
						舆情调节率
					</div>
				</div>
				
				<tubiaoc :wenxianmsg="wenxianmsg" v-if="wenxianmsg">
					
				</tubiaoc>
				
			  
			</el-card>
			
		</div>
		<div style="width: 100%;height:300px; margin-top:15px; padding: 0px;background-color: #fff;border-radius: 5px;">
				<el-card shadow="never" header="" style="width: 100%;">
					<div slot="header" style="display: flex;align-items: center;justify-content: space-between;">
						<div>
							敏感舆情统计
						</div>
					</div>
					
					<tubiaod :jieyueliangmsg="jieyueliangmsg" v-if="jieyueliangmsg">
						
					</tubiaod>
					
				  
				</el-card>
		</div>
      </el-col>
	  
      <el-col :lg="9" :md="12">
        <el-card
          shadow="never"
          header="通知公告"
          body-style="padding: 19px 0;height:575px;position:relative;">
		  <div style="height: 500px;overflow-y: scroll;">
			  <div
				v-for="(item, index) in tongzhilist"
				:key="index"
				class="ele-cell user-list-item" @click="showdoc(item)" >
			  
				<div class="ele-cell-content" >
				  <div class="ele-cell-title " style="display: flex;align-items: center;"> 
				  <div  calss="bba" style="margin-right:10px; width:35px;height:22px;line-height: 22px;text-align:center; background-color: #1890fe;font-size: 12px;border-radius: 3px;color:#fff;">
				  	{{item.read_status}}
				  </div> 
				  <div class="aaca" > {{ item.title }}</div>
				   </div>
				  <div class="ele-cell-desc">{{ item.content }}</div>
				</div>
			  </div>
			  <div v-if="tongzhilist.length == 0" style="color: #999; text-align: center;margin-top: 50px;">暂无数据</div>
		  </div>
		  <div @click="gengduo" style=" cursor:pointer; position: absolute;bottom: 0;left:0;width:100%;height:40px;text-align: center;color:#1890fe;border-top: 1px solid rgba(0,0,0,0.1);padding-top: 20px;">
		  	查看更多
		  </div>
        </el-card>
      </el-col>
	 
     
    </el-row>
		<div class="dialog_diy">
 <el-dialog :visible.sync="dialogVisible" width="20%">
	  		
	  	
	  	         <div slot="title" style="width: 100%;height: 100%;display: flex;align-items: center;">
	  	         	<i class="el-icon-s-order" style="color: #fff;font-size: 40px;margin-right: 10px;"></i>
	  	         	<div>通知公告</div>
	  	         </div>
	  
	  	<span >
			<div style="height: 400px;overflow-y: scroll;">
	  		<div style="padding: 10px;font-weight: 600;margin-bottom: 10px;"> {{gonggaomsga.title}}</div>
			<div style="">{{gonggaomsga.content}}</div>
				</div>
	  	</span>
	  	
	  </el-dialog>
	  </div>
  </div>
</template>

<script>
	import tubiaoa from '@/components/tubiao/tubiaoa.vue'
	import tubiaob from '@/components/tubiao/tubiaob.vue'
	import tubiaoc from '@/components/tubiao/tubiaoc.vue'
	import tubiaod from '@/components/tubiao/tubiaod.vue'
	
export default {
  name: 'DashboardWorkplace',
  components: {tubiaoa,tubiaob,tubiaoc,tubiaod},
  data() {
    return {
		gonggaomsga:{},
		dialogVisible:false,
		page:1,
		tongzhilist:[],
		jieyueliangmsg:[
			{name: "2023-06-19", title: "06-19", jie_num: 5, huan_num: 10},
			{name: "2023-06-20", title: "06-20", jie_num: 2, huan_num: 6},
			{name: "2023-06-21", title: "06-21", jie_num: 5, huan_num: 8},
			{name: "2023-06-22", title: "06-22", jie_num: 6, huan_num: 6},
			{name: "2023-06-23", title: "06-23", jie_num: 4, huan_num: 12},
			{name: "2023-06-24", title: "06-24", jie_num: 8, huan_num: 14},
			{name: "2023-06-25", title: "06-25", jie_num: 4, huan_num: 10},
		],
			jieyuemsg:{
				borrow_zhanbi:{
					dong_num:{name:'东区',value:'250'},
					xi_num:{name:'西区',value:'250'},
					nan_num:{name:'南区',value:'250'},
					bei_num:{name:'北区',value:'250'},
					zhanbi:{name:'占比',value:'100%'},
				}
			},
			guancangmsg:[
				{id: 1, name: "轻舆情", value: "80%", num: 120},
				{id: 1, name: "中度舆情", value: "15.69%", num: 15},
				{id: 1, name: "重舆情", value: "2.69%", num: 2},
				{id: 1, name: "特重舆情", value: "0.69%", num: 1},
			],
			wenxianmsg:{
				jieyue: {name: "舆情调节数", value: 19},
				zongshu: {name: "舆情总数", value: 20},
				zhanbi: {name: "占比", value: "95%"}
				},
			radio1:'year',
			url: process.env.VUE_APP_API_BASE_URL,
			msg:{
				base:[
					{name: "网页新闻", value: 5560, unit: "条"},
					{name: "APP新闻", value: 4100, unit: "条"},
					{name: "抖音", value: 15206, unit: "条"},
					{name: "微博", value: 1125, unit: "条"},
					{name: "公众号", value: 3560, unit: "条"},
					{name: "小红书", value: 15232, unit: "条"},
					{name: "头条号", value: 1452, unit: "条"},
					{name: "视频", value: 122 , unit: "条"},
				],
				yuqi_list:[
					{type:'负面',time:'2023-6-21 15:20',num:'152',text:'运城市环境污染严重'},
					{type:'负面',time:'2023-6-21 16:20',num:'142',text:'‘自媒体’乱象'},
					{type:'负面',time:'2023-6-21 18:20',num:'152',text:'运城市环境污染严重'},
					{type:'负面',time:'2023-6-21 18:20',num:'126',text:'运城市环境污染严重'},
					{type:'负面',time:'2023-6-21 18:20',num:'114',text:'运城市环境污染严重'}
				]
			},
			

    };
  },
  created(){
	  // this.getjieyuea()
  },
  mounted() {
  	// this.getpaylist();
	// this.getmsg()
	// this.gettongzhi()
  },
  methods:{
	  showdoc(item){
		
		  this.dialogVisible=true
		  this.gonggaomsga=item
		  this.yidu(item.id)
	  },
	  yidu(id){
		  this.$http.post(`/back/noticeadmin/read`,{id}).then(res => {
				if (res.data.code === 1) {
					  this.gettongzhi()
					
				} else {
					this.$message.error(res.data.msg || '获取数据失败');
				}
		  })
	  },
	  gengduo(){
		this.page++
		  this.gettongzhi()
	  },
	  gettongzhi(){
	  		  this.$http.get(`back/index/notice_list?page=${this.page}&size=10`).then(res => {
	  				if (res.data.code === 1) {
						console.log('123132',res.data)
						if(this.page==1){
							this.tongzhilist=[...this.tongzhilist,...res.data.data.data]
							
						}else{
							this.tongzhilist=[...this.tongzhilist,...res.data.data.data]
						}
						
	  				} else {
	  					this.$message.error(res.data.msg || '获取数据失败');
	  				}
	  		  })
	  },
	  changenian(e){
		  this.getjieyuea()
	  },
	  async getjieyuea(){
		  this.$http.get(`/back/index/borrow_zhanbi?date_type=${this.radio1}`).then(res => {
				if (res.data.code === 1) {
					this.jieyuemsg = res.data.data
					
				} else {
					this.$message.error(res.data.msg || '获取数据失败');
				}
		  })
	  },

  },
  computed: {
    // 当前登录用户信息
    loginUser() {
      return this.$store.state.user.user;
    }
  }
}
</script>

<style scoped lang="scss">
	.dialog_diy{
	  ::v-deep .el-dialog__wrapper { // eslint-disable-line
	    .el-dialog {
	     
	        .el-dialog__header{
				color: #fff;
				font-size: 20px;
				font-weight: 600;
			  background-color: #1890ff;
			  .el-dialog__title{
				  color: #fff;
				  font-size: 20px;
				  font-weight: 600;
			  }
			  .el-dialog__headerbtn .el-dialog__close {
			      color:#fff;
			  }
	        }
	       
	    }
	  }
	}
	
	.aaca {
		font-weight: 600;
		
	}
	.aaca:hover{
		color:#f77777 !important
	}
	.card1{
		width: 130px !important;
		height:110px !important;
	}
	.jichu{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		padding:20px;
		padding-bottom: 0;
		.jichu-item{
			position:relative;
			overflow: hidden;
			border-radius: 10px;
			padding: 15px;
			width: 240px;
			height:76px;
		
			margin-bottom: 20px;
			background-image: url('./bj.png');
			background-repeat: no-repeat;
			background-size: 100%;
			.item-title{
				
			}
			.item-msg{
				margin-top: 30px;
				padding-right: 10px;
				text-align: right;
				.msg-zuo{
					    color: #409eff;
					    font-family: auto;
					    font-weight: 700;
					    font-size: 24px;
				}
				.msg-you{
					   
				}
			}
		}
	}
/* 顶部用户信息卡片 */
.workplace-user-card .ele-cell-content {
  overflow: hidden;
}

.workplace-count-group {
  white-space: nowrap;
}

.workplace-count-item {
  padding: 0 5px 0 25px;
  box-sizing: border-box;
  display: inline-block;
  text-align: right;
}

.workplace-count-name {
  padding-left: 8px;
}

.workplace-count-num {
  font-size: 24px;
  margin-top: 6px;
}

@media screen and (max-width: 992px) {
  .workplace-count-item {
    padding: 0 5px 0 10px;
  }
}

@media screen and (max-width: 768px) {
  .workplace-user-card,
  .workplace-count-group {
    display: block;
  }

  .workplace-count-group {
    margin-top: 15px;
    text-align: right;
  }

  .workplace-user-card ::v-deep .el-avatar {
    width: 45px !important;
    height: 45px !important;
  }

  .workplace-user-card h4 {
    font-size: 16px;
  }

  .workplace-user-card h4 + .ele-text-secondary {
    font-size: 12px;
  }

  .workplace-user-card {
    margin: -10px;
  }
}

/* 快捷方式 */
.app-link-block {
  display: block;
  color: inherit;
  padding: 15px 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.app-link-block .app-link-icon {
  color: #69c0ff;
  font-size: 30px;
  margin-top: 5px;
}

.app-link-block .app-link-title {
  margin-top: 8px;
}

/* 最新动态时间轴 */
.ele-timeline-act {
  padding-left: 50px;
}

.ele-timeline-act ::v-deep .el-timeline-item__timestamp {
  margin: 0;
  position: absolute;
  top: 3px;
  left: -45px;
}

.ele-timeline-act ::v-deep .el-timeline-item {
  padding-bottom: 19px;
}

.ele-timeline-act ::v-deep .el-timeline-item:last-child {
  padding-bottom: 0;
}

/* 表格 */
.workplace-table-card ::v-deep .el-table tbody > .el-table__row:last-child td {
  border-bottom: none;
}

.workplace-table-card ::v-deep .el-table:before {
  display: none;
}

.workplace-table-card .sort-handle {
  cursor: move;
  font-size: 18px;
  vertical-align: middle;
}

.workplace-table-card ::v-deep .el-table__row.sortable-chosen {
  background-color: hsla(0, 0%, 60%, .1);
}

.workplace-table-card ::v-deep .el-table__row.sortable-chosen td {
  background-color: transparent;
}

/* 本月目标 */
.workplace-goal-group {
  text-align: center;
  position: relative;
  padding: 48px 0;
}

.workplace-goal-group .workplace-goal-content {
  position: absolute;
  top: 90px;
  left: 0;
  width: 100%;
}

.workplace-goal-group .workplace-goal-num {
  font-size: 40px;
  margin-top: 15px;
}

/* 小组成员 */
.user-list-item {
  padding: 13px 18px;
}

.user-list-item + .user-list-item {
  border-top: 1px solid hsla(0, 0%, 60%, .15);
}

.user-list-item .ele-cell-desc {
  margin-top: 5px;
}

/* 小屏幕优化 */
@media screen and (max-width: 768px) {

}
</style>
